<template>
  <div class="app-container">
    <div class="user-header">
      <TableHeader>
        <template v-slot:left>
          <el-input
            placeholder="用户名"
            v-model="username"
          />
        </template>
        <template v-slot:right>
          <el-button @click="add" icon="el-icon-plus" type="primary">添加</el-button>
          <el-button @click="search" icon="el-icon-search" type="primary">搜索</el-button>
          <el-button icon="el-icon-document" type="primary">导出</el-button>
          <el-button @click="refresh" icon="el-icon-refresh" type="primary">刷新</el-button>
        </template>
      </TableHeader>
    </div>
    <div class="user-table">
      <Table
        :table-columns="tableDatas.columns"
        :table-data="tableDatas.items"
      >
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleEdit(scope.row)"
              size="mini"
              type="info"
            >
              编辑
            </el-button>
            <el-button
              @click="handleDelete(scope.row)"
              size="mini"
              type="danger"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </Table>
    </div>
    <div class="user-footer">
      <TablePage :page-size="tableDatas.pageSize" :total-size="tableDatas.totalSize"
                 @currentPageChange="currentPageChange"></TablePage>
    </div>
    <Dialog
      :dialog-visible="dialogVisible"
      @changeVisible="changeVisible"
      dialog-title="用户"
      ref="dialog"
    >
      <!--如果showContent是edit显示-->
      <el-form :model="formData" label-position="right" label-width="80px" v-if="showContent === 'edit'">
        <el-form-item :key="item.prop" :label="item.label" v-for="item in tableDatas.columns">
          <el-date-picker
            placeholder="选择日期"
            type="date"
            v-if="item.type === 'Date'"
            v-model="formData[item.prop]"
          />
          <el-input
            v-else-if="item.type === 'String'"
            v-model="formData[item.prop]"/>
        </el-form-item>
      </el-form>
      <!--如果showContent是add显示-->
      <el-form :model="formData" label-position="right" label-width="80px" v-else-if="showContent === 'add'">
        <el-form-item :key="item.prop" :label="item.label" v-for="item in tableDatas.columns">
          <el-date-picker
            placeholder="选择日期"
            type="date"
            v-if="item.type === 'Date'"
            v-model="formData[item.prop]"
          />
          <el-input
            v-else-if="item.type === 'String'"
            v-model="formData[item.prop]"/>
        </el-form-item>
      </el-form>
      <!--如果showContent是delete显示-->
      <div style="text-align: center;" v-else-if="showContent === 'delete'">
        <span>
          是否确定删除?
        </span>
      </div>
    </Dialog>
  </div>
</template>

<script>
	import TableHeader from '@/components/Table/TableHeader'
	import TablePage from '@/components/Table/TablePage'
	import Table from '@/components/Table/Table'
	import Dialog from '@/components/Dialog/Dialog'
	import {devConfig} from '@/http/config'

	export default {
		name: 'user',
		components: {
			Dialog,
			Table,
			TablePage,
			TableHeader
		},
		data() {
			return {
				dialogVisible: false,
				showContent: null,
				username: null,
				tableDatas: {
					// 列数据
					columns: [
						{
							prop: 'date',
							label: '日期',
							type: 'Date'
						},
						{
							prop: 'name',
							label: '姓名',
							type: 'String'
						},
						{
							prop: 'address',
							label: '地址',
							type: 'String'
						}
					],
					// 查询到的总数
					totalSize: 0,
					// 当前查询到的数据
					items: [],
					currentPage: 1,
					pageSize: devConfig.pageSize
				},
				formData: null,
				input: null
			}
		},
		methods: {
			refresh() {
				this.getUserList()
			},
			search() {
				// 修改tableDatas以及totalSize
			},
			add() {
				this.dialogVisible = !this.dialogVisible
				this.showContent = 'add'
				this.formData = {}
			},
			// 当子组件改变页数时,触发这个方法
			currentPageChange(page) {
				console.log('当前的页数是:')
				console.log(page)
				this.getUserList()
			},
			handleEdit(rowData) {
				this.dialogVisible = !this.dialogVisible
				this.showContent = 'edit'
				this.formData = rowData
				console.log(203)
				console.log(this.formData)
			},
			handleDelete(rowData) {
				this.dialogVisible = !this.dialogVisible
				this.showContent = 'delete'
				console.log(rowData)
			},
			changeVisible(key) {
				this.dialogVisible = !this.dialogVisible
				this.showContent = null
				switch (key) {
					case 'cancel':
						console.log(key)
						break
					case 'sure':
						// 如果id是空得,表明是添加,如果id不为空,表明是修改
						console.log(220)
						console.log(this.formData)
						break
				}
			},
			getUserList() {
				this.$api.user.users().then(
					res => {
						this.tableDatas.totalSize = res.data.data.total_size
						this.tableDatas.items = res.data.data.items
					}
				)
			}
		},
		created() {
			this.getUserList()
		}
		/*watch: {
      dialogVisible: function (value) {
        console.log(value)
      }
    }*/
	}
</script>

<style lang="scss" scoped>
  //@import "./src/style/mixin";

  .app-container {
    .user-header {
      height: 8%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .user-table {
      height: 85%;
      max-height: 85%;
      overflow-y: scroll;
    }

    .user-footer {
      height: 7%;
      text-align: center;

      div {
        margin-top: 10px;
      }
    }
  }
</style>
